<template>
  <div class="parper-preview" v-if="localData">
    <div class="preTop">
      <div class="preTitle">{{ localData && localData.exaParper ? localData.exaParper.parperName : '' }}</div>
      <div class="preScore">试卷总分：{{ localData && localData.exaParper ? localData.exaParper.parperScore : 0 }}</div>
    </div>

    <div class="preContent" v-for="(question, qIndex) in localData.exaClassVoList" :key="qIndex">
      <div class="tiMu">
        <div class="tiMu_top">
          <div class="tiMuTitle">{{ question.exaParperClass.className }}</div>
          <div class="tiMuScore">(共{{ question.exaClassQuestionsList.length }}题／总计{{ getTiMuScore(question) }}分)</div>
        </div>
        <div class="shiTi" v-for="(item, index) in question.exaClassQuestionsList" :key="index">
          <div class="tiMuTitle">
            <div class="tiMuTitle_txt">
              <span style="font-size: 18px;">{{ index + 1 }}.</span>
              <span style="margin-left: 5px;">
                {{ item.exaQuestionBankVo.exaQuestionBank.title }}
              </span>
            </div>
            <div class="tiMuTitle_score">（{{ item.exaQuestionBankVo.exaQuestionBank.score }}分）</div>
          </div>
          <div class="tiMuOptions">
            <div class="option" v-for="(option, oIndex) in item.exaQuestionBankVo.exaQuestionOptionsList"
              :class="{ tiMuOptionsitem_hover: option.rorw }" :key="oIndex">{{ oIndex + 1 }}. {{
                option.content }}</div>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PreviewParper',
  props: {
    preData: {
      type: Object,
      default: () => ({
        title: '',
        score: 0,
        questions: []
      })
    }
  },
  data() {
    return {
      localData: {
        exaParper: {},
        exaClassVoList: []
      }
    };
  },
  watch: {
    preData: {
      handler(newVal) {
        this.localData = JSON.parse(JSON.stringify(newVal));
        // console.log("预览数据已更新:", this.localData);
      },
      immediate: true,
      deep: true
    }
  },
  mounted() {
    this.localData = JSON.parse(JSON.stringify(this.preData));
    console.log('预览数据:', this.localData);
  },
  methods: {
    getTiMuScore(item) {
      if (!item.exaClassQuestionsList) return 0;
      return item.exaClassQuestionsList.reduce(
        (sum, q) => sum + (Number(q.exaQuestionBankVo.exaQuestionBank.score) || 0), 0
      );
    }
  }
}

</script>

<style lang="scss" scoped>
.parper-preview {
  padding: 20px 0;
  // box-sizing: border-box;
  // background-color: #fff;
  // border-radius: 8px;
  // box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

  .preTop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
    box-sizing: border-box;

    border-bottom: 1px solid #e0e0e0;

    .preTitle,
    .preScore {
      font-size: 18px;
      color: #000;
    }

  }

  .preContent {
    padding: 30px 0;
    box-sizing: border-box;

    .tiMu {
      // display: flex;
      // justify-content: space-between;
      // align-items: center;

      .tiMu_top {
        width: 97%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        font-size: 16px;


        .tiMuTitle {
          font-size: 16px;
          font-weight: bold;
          color: #403933;
        }

        .tiMuScore {
          font-size: 16px;
          color: #747474;
        }
      }

      .shiTi {
        width: 75%;
        margin: 0 auto;
        margin-bottom: 20px;
        padding: 10px;
        background-color: #fff;
        border-radius: 4px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

        .tiMuTitle {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 10px;

          .tiMuTitle_txt {
            font-size: 16px;
            color: #333;
          }

          .tiMuTitle_score {
            font-size: 14px;
            color: #999;
          }
        }

        .tiMuOptions {
          display: flex;
          flex-direction: column;

          .option {
            width: 100%;
            line-height: 40px;
            font-size: 16px;
            border: 1px solid #F0F0F0;
            // background-color: #000;
            margin-top: 10px;
            padding: 5px 10px;
            box-sizing: border-box;
            border-radius: 5px;
            color: #333;
            // cursor: pointer;

            &:hover {
              background-color: #f9f0f0;
              border-color: #f0e7e7;
            }
          }

          .tiMuOptionsitem_hover {
            background-color: #FFF3F3;
            border-color: #ECACAC;
          }
        }
      }
    }
  }
}
</style>
